<template>
  <view class="service-card u-m-t-40">
    <text class="service-title">服务与支持</text>
    <view class="menu-items">
      <view @click="navto(item)"  v-for="(item, index) in menus" :key="index">
        <Cell :icon="item.img" :title="item.text" ></Cell>
      </view>
    </view>
    <u-popup :show="showServiceDialog" mode="center" :round="10" @open="onPopupOpen" @close="close" >
            <view class="service-dialog ">
               <view class="service-dialog-title">联系客服</view>
                <view class="service-dialog-desc">
                  人工客服电话：<text @click="callPhone" class="service-dialog-desc-phone">{{phoneNumber}}</text>。
                  若遇紧急问题，请及时添加投票小助手客服企微并留言反馈。如遇节假日或投票高峰期请耐心等候。
              </view>
                <!-- <image class="service-dialog-qrcode" 
                src="https://ainij.oss-cn-beijing.aliyuncs.com/pms/202507/code.jpg" 
                :show-menu-by-longpress="true" mode="widthFix"/> -->
                <image class="service-dialog-qrcode" 
                :src="codeUrl" :show-menu-by-longpress="true" mode="scaleToFill"/>
               <view class="service-dialog-btn" @click="close">我知道了</view>
            </view>
		</u-popup>
   
  </view>
 
</template>

<script>
import Cell from './Cell.vue'
import companyInfo from '@/util/companyInfo'
import { codeUrl } from '@/util/config'
import {
  mapState,
  mapMutations,
  mapActions
} from 'vuex'
export default {
  name: 'Menus',
  components: { Cell },
  props: {
    menus: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      codeUrl,
      showServiceDialog: false,
      phoneNumber: companyInfo.phone
    }
  },
  methods:{
      ...mapActions("app",["isLogin"]),
    callPhone(){
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber
      })
    },
    async navto(row){
     
      const {url,status}=row
      if(url==""){
        this.showServiceDialog=true
        return
      }
       let bo=await this.isLogin()
       if(bo){
       
      if(status==0){
        if(!url){
          uni.$u.toast("暂未开放")
          return
        }
        
        uni.navigateTo({
          url: url
        })
      }else{ 
        this.showServiceDialog=true
      }
      }
    },
    onPopupOpen(){
      uni.hideTabBar()
      
    },
    close(){
       uni.showTabBar()
      this.showServiceDialog=false
    }
  }
}
</script>

<style lang="scss" scoped>

.service-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
}
.menu-items {
  margin-top: 37rpx;
}
.service-dialog {
  width: 600rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx ;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16rpx;
  // border-bottom:1px solid #E5E5E5;
  padding-bottom: 40rpx;
  height: 667rpx;

 
}
.service-dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
}
.service-dialog-desc {
  font-size: 24rpx;
  color: #333;
 
  // margin-bottom: 32rpx;
  line-height: 1.7;
}
.service-dialog-qrcode {
  width:280rpx;
  height: 280rpx;
  margin-bottom: 16rpx;
  border-radius: 8rpx;
  // padding-bottom:32rpx;
  // padding: 40rpx ; 
  // margin-block: 20rpx;
  margin: 40rpx 0   25rpx 0;
  
}
.service-dialog-tip {
  font-size: 22rpx;
  color: #aaa;
  margin-bottom: 32rpx;
}
.service-dialog-btn {
  border-top: 1px solid #E5E5E5;
  width: 100%;
  height: 80rpx;
  color: $uni-color-primary;
  border-radius: 12rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin-top: 8rpx;
  position: absolute;
  bottom: 4rpx;
}
.service-dialog-desc-phone{
  color: $uni-color-primary;
}
</style>
